<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv=Cache-Control content=no-cache />
  <title>消費卡計算</title>

  <style>
    .hints {
      font-size: small;
      color: green;
    }

    .instructions p {
      font-size: small;
      color: chocolate;
    }

    iframe {
      border: none;
      width: 100%;
      height: 200px;
    }
  </style>

</head>

<body>
  卡內剩餘：
  <div style="border: dashed;
  border-width: 2px;
  width: fit-content;
  padding: 10px 10px 10px 0;
  margin-bottom: 10px;">
    餘額： <input placeholder="" id="yue" value=0 />
    <button onclick="document.getElementById('yue').value = 0;">X</button>
    <span class="hints">消費卡内顯示的剩餘餘額</span>
    <br /><br /> 立減額： <input placeholder="" id="liljian" />
    <button onclick="document.getElementById('liljian').value = '';">X</button>
    <span class="hints">消費卡内顯示的剩餘立減額</span>
  </div>
  消費金額： <input placeholder="" id="xiaofei" />
  <button onclick="document.getElementById('xiaofei').value = '';">X</button>
  <span class="hints">消費多少金額可以用完卡内的立減額</span>
  <br /><br /> 充值金額： <input placeholder="" id="chongzhi" />
  <button onclick="document.getElementById('chongzhi').value = '';">X</button>
  <span class="hints">充值多少金額可以用完卡内的立減額</span>
  <br /><br />
  <button onclick="calculate()">計算</button>
  <br /><br />
  <button onclick="init()">恢復默認</button>

  <hr />
  <!-- <iframe src="./instruction.html"></iframe> -->
  <div class="instructions">
    <p>使用説明：</p>
    <p>1. 卡内剩餘餘額和立減額可在所屬電子支付系統内查詢， 實體消費卡可於mPay内查詢</p>
    <p>2. 點擊"恢復默認"按鈕可以清空所有的輸入框</p>
    <p>使用方法(1):輸入餘額和立減額，點擊"計算"可以得到消費金額和充值金額</p>
    <p>使用方法(2):輸入消費金額，點擊"計算"可以得到立減額和充值金額</p>
    <p>使用方法(3):輸入充值金額，點擊"計算"可以得到立減額和消費金額</p>
  </div>

  <!-- partial:index.partial.html -->
  <script>
    function calculate() {
      let yue = parseFloat(document.getElementById('yue').value);
      let liljian = parseFloat(document.getElementById('liljian').value);
      let xiaofei = parseFloat(document.getElementById('xiaofei').value);
      let chongzhi = parseFloat(document.getElementById('chongzhi').value);
      yue = isNaN(yue) ? 0 : yue;

      // console.log(yue, liljian, xiaofei, chongzhi)

      if (!isNaN(liljian) && isNaN(xiaofei) && isNaN(chongzhi)) {
        document.getElementById('xiaofei').value = liljian / 0.25;
        document.getElementById('chongzhi').value = (liljian / 0.25) - liljian - yue;
      }

      if (!isNaN(xiaofei)) {
        let liljian__ = xiaofei * 0.25
        document.getElementById('liljian').value = liljian__;
        document.getElementById('chongzhi').value = (liljian__ / 0.25) - liljian__ - yue;
      }

      if (!isNaN(chongzhi) && isNaN(xiaofei) && isNaN(liljian)) {
        let xiaofei__ = (chongzhi + yue) / 0.75
        document.getElementById('liljian').value = xiaofei__ * 0.25;
        document.getElementById('xiaofei').value = xiaofei__;
      }
      if (isNaN(chongzhi) && isNaN(xiaofei) && isNaN(liljian)) {
        popMsg("請輸入立減額")
      }
    }

    function popMsg(message) {
      alert(message);
    }

    function init() {
      document.getElementById('liljian').value = '';
      document.getElementById('xiaofei').value = '';
      document.getElementById('chongzhi').value = '';
      document.getElementById('yue').value = 0;
    }
  </script>
</body>

</html>